<template>
    <div>
        <div class="cat">
            <div @click="catPriveseJump(item)" :key="index" v-for="(item,index) in videoCat" class="cat-item">
                <div class="mask">
                    <div class="item-name">{{item}}</div>
                </div>
                <img src="../assets/img/1e9da84b53ea4898ba859175609ac6bd.jpeg" alt="">
            </div>
        </div>

        <div class="hot-cat" v-if="videoCatInfo0 != null && videoCatInfo0.length >= 2">
            <div  class="hot-item">
                <div class="item-dt">
                    <div class="dt-name">
                        <i class="iconfont">&#xe609;</i>
                        <span>{{videoCatInfo0[0].cat}}</span>
                        
                    </div>
                    <a @click="catPriveseJump(videoCatInfo0[0].cat)" href="javascript:;">查看全部</a>
                </div>
                <div class="item-dd">
                    <img @click="priveseJump(videoCatInfo0[0])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo0[0].imgs}`">
                    <img @click="priveseJump(videoCatInfo0[1])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo0[1].imgs}`">
                    <img @click="priveseJump(videoCatInfo0[2])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo0[2].imgs}`">
                </div>
            </div>

        </div>

        <div class="hot-cat" v-if="videoCatInfo1 != null && videoCatInfo1.length >= 2">
            <div  class="hot-item">
                <div class="item-dt">
                    <div class="dt-name">
                        <i class="iconfont">&#xe609;</i>
                        <span>{{videoCatInfo0[1].cat}}</span>
                        
                    </div>
                    <a @click="catPriveseJump(videoCatInfo1[0].cat)" href="javascript:;">查看全部</a>
                </div>
                <div class="item-dd">
                    <img @click="priveseJump(videoCatInfo1[0])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo1[0].imgs}`">
                    <img @click="priveseJump(videoCatInfo1[1])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo1[1].imgs}`">
                    <img @click="priveseJump(videoCatInfo1[2])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo1[2].imgs}`">
                </div>
            </div>

        </div>

        <div class="hot-cat" v-if="videoCatInfo2 != null && videoCatInfo2.length >= 2">
            <div  class="hot-item">
                <div class="item-dt">
                    <div class="dt-name">
                        <i class="iconfont">&#xe609;</i>
                        <span>{{videoCatInfo2[0].cat}}</span>
                        
                    </div>
                    <a @click="catPriveseJump(videoCatInfo2[0].cat)" href="javascript:;">查看全部</a>
                </div>
                <div class="item-dd">
                    <img @click="priveseJump(videoCatInfo2[0])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo2[0].imgs}`">
                    <img @click="priveseJump(videoCatInfo2[1])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo2[1].imgs}`">
                    <img @click="priveseJump(videoCatInfo2[2])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo2[2].imgs}`">
                </div>
            </div>

        </div>

        <div class="hot-cat" v-if="videoCatInfo3 != null && videoCatInfo3.length >= 2">
            <div  class="hot-item">
                <div class="item-dt">
                    <div class="dt-name">
                        <i class="iconfont">&#xe609;</i>
                        <span>{{videoCatInfo3[0].cat}}</span>
                        
                    </div>
                    <a @click="catPriveseJump(videoCatInfo3[0].cat)" href="javascript:;">查看全部</a>
                </div>
                <div class="item-dd">
                    <img @click="priveseJump(videoCatInfo3[0])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo3[0].imgs}`">
                    <img @click="priveseJump(videoCatInfo3[1])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo3[1].imgs}`">
                    <img @click="priveseJump(videoCatInfo3[2])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo3[2].imgs}`">
                </div>
            </div>

        </div>

        <div class="hot-cat" v-if="videoCatInfo4 != null && videoCatInfo4.length >= 2">
            <div  class="hot-item">
                <div class="item-dt">
                    <div class="dt-name">
                        <i class="iconfont">&#xe609;</i>
                        <span>{{videoCatInfo4[0].cat}}</span>
                        
                    </div>
                    <a @click="catPriveseJump(videoCatInfo4[0].cat)" href="javascript:;">查看全部</a>
                </div>
                <div class="item-dd">
                    <img @click="priveseJump(videoCatInfo4[0])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo4[0].imgs}`">
                    <img @click="priveseJump(videoCatInfo4[1])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo4[1].imgs}`">
                    <img @click="priveseJump(videoCatInfo4[2])" v-lazy="`http://47.105.157.158:3000/images/video/${videoCatInfo4[2].imgs}`">
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import { onMounted, ref } from '@vue/composition-api';
import axios from 'axios';
export default {
    setup (props, context) {
        axios.defaults.baseURL = 'http://47.105.157.158:3000';

        onMounted(() => {
            getVideoCat();
        })

        // 视频分类
        const videoCat = ref([]);
        // 获取视频分类
        const getVideoCat = async function () {
            let { data: res } = await axios.get('/video/video/cat');
            if (res.status != 200)
                return context.parent.$message.error('获取视频分类失败，请刷新后重试');
            videoCat.value = res.cat;
            context.parent.$nextTick(() => {
                getVideoCatInfo();
            })
        }

        // 分类信息
        const videoCatInfo0 = ref(null);
        const videoCatInfo1 = ref(null);
        const videoCatInfo2 = ref(null);
        const videoCatInfo3 = ref(null);
        const videoCatInfo4 = ref(null);
        // 获取分类
        const getVideoCatInfo = async function () {
            // 由于后期没考虑到拓展性，已经上传到服务器上了...没写获取所有视频的接口
            let { data: res0 } = await axios.get(`/video/video/data/${videoCat.value[0]}`);
            let { data: res1 } = await axios.get(`/video/video/data/${videoCat.value[1]}`);
            let { data: res2 } = await axios.get(`/video/video/data/${videoCat.value[2]}`);
            let { data: res3 } = await axios.get(`/video/video/data/${videoCat.value[3]}`);
            let { data: res4 } = await axios.get(`/video/video/data/${videoCat.value[4]}`);
            if (res0.status != 200 || res1.status != 200 || res2.status != 200 || res3.status != 200 || res4.status != 200)
                return context.parent.$message.error('获取视频数据失败，请刷新后重试');
            videoCatInfo0.value = res0.data;
            videoCatInfo1.value = res1.data;
            videoCatInfo2.value = res2.data;
            videoCatInfo3.value = res3.data;
            videoCatInfo4.value = res4.data;
        }

        // /catPrivese/:id

        // 跳转到详情
        const priveseJump = function (item) {
            context.parent.$store.commit('setVideoData', item);
            context.parent.$router.push(`/privese/${item.names}`);
        }
 
        // 跳转到分类
        const catPriveseJump = function (cat) {
            context.parent.$router.push(`/catPrivese/${cat}`);
        }


        const methods = { priveseJump, catPriveseJump }

        return {
            ...methods,
            videoCat,
            videoCatInfo0,
            videoCatInfo1,
            videoCatInfo2,
            videoCatInfo3,
            videoCatInfo4,
        }
    }
}
</script>

<style lang="less" scoped>
.cat {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .cat-item {
        position: relative;
        width: 49%;
        margin-bottom: .266667rem;
        .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .4);
            .item-name {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                font-weight: 700;
                color: #fff;
            }
        }
    }
}

.hot-cat {
    margin-top: .666667rem;
    .hot-title {
        font-weight: 700;
        font-size: 1.066667rem;
        margin-bottom: .8rem;
    }
    .hot-item {
        margin-bottom: .666667rem;
        .item-dt {
            display: flex;
            height: 1.333333rem;
            padding: 0 .266667rem;
            line-height: 1.333333rem;
            justify-content: space-between;
            .dt-name {
                span {
                    font-size: .666667rem;
                    font-weight: 700;
                }
            }
            a {
                font-size: .666667rem;
                color: #838385;
            }
        }
        .item-dd {
            margin-top: .346667rem;
            display: flex;
            padding: 0 .266667rem;
            justify-content: space-between;
            img {
                width: 32%;
                height: 4rem;
                border-radius: .266667rem;
            }
        }
    }
}
</style>